<template>
  
  <div class="bgBox">
   
    <div class="container">

      <div class="tableBox">
        <!-- <el-tabs v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane v-for="item in project" :label="item.label" :name="item.value"></el-tab-pane>
      

      </el-tabs> -->
      <el-form
        :inline="true"
        label-width="80px"
        :model="formInline"
        class="demo-form-inline"
        size="mini"
      >
        <el-row>
          <el-col :xs="24" :sm="12" :md="4">
            <el-form-item label="赛季">
              <el-select
                v-model="formInline.seasonId"
                placeholder="请选择"
                size="medium"
                class="inputAndSelect"
                 @change="search"
              >
             
                <el-option
                  v-for="(item, index) in seasons
"
                  :label="item.seasonName"
                  :value="item.id"
                  :key="index"
                  >{{ item.seasonName}}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="4">
            <el-form-item label="项目">
              <el-select
                v-model="formInline.eventName"
                placeholder="请选择"
                size="medium"
                class="inputAndSelect"
                @change="search"
              >
              <el-option
                  label="全部"
                  value="全部"
                  
                  >全部</el-option
                >
                <el-option
                  v-for="(item, index) in projectList
"
                  :label="item.codeName"
                  :value="item.codeName"
                  :key="index"
                  >{{ item.codeName}}</el-option
                >
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="4">
            <el-form-item label="道馆名称">
             <el-input size="medium" placeholder="请输入" v-model="formInline.name" @input="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="省市区" style="display:flex">
              <el-select
                 v-model="province"
                 placeholder="请选择"
                 size="medium"
                 class="select30"
                 value-key="Code"
                
                 @change="provinceChange"
                  clearable
                @clear="provinceClear"
              >
                <el-option
                  v-for="(item, index) in cityJson
"
                  :label="item.Name"
                  :value="item"
                  :key="item.code"
                  >{{ item.Name}}</el-option
                >
              </el-select>
              <el-select
                v-model="city"
                placeholder="请选择"
                size="medium"
                class="select30"
                 @change="cityChange"
                  value-key="Code"
                   clearable
                @clear="cityClear"
              >
                <el-option
                  v-for="(item, index) in cityList
"
                  :label="item.Name"
                  :value="item"
                  :key="item.Code"
                  >{{ item.Name}}</el-option
                >
              </el-select>
              <el-select
                v-model="formInline.country"
                placeholder="请选择"
                size="medium"
                class="select30"
                 @change="search"
                  clearable
                @clear="search"
              >
                <el-option
                  v-for="(item, index) in countryList
"
                  :label="item.Name"
                  :value="item.Code"
                  :key="index"
                  >{{ item.Name}}</el-option
                >
              </el-select>
            </el-form-item>
         
          </el-col>

        </el-row>
      </el-form>
        <el-table
           v-if="windowWidth > 768 || windowWidth == 768"
          :data="tableData"
          style="width: 100%; border: 1px solid #ddd"
          height="670"
          size="small"
           @row-click="(item)=>dialogVisible1Show(item,1)"
        >
        <!-- @row-click="dialogVisible1Show" -->
          <el-table-column label="排名" type="index" align="center" width="100">
            <template slot-scope="scope">
              <el-tag type="success" size="small">{{ scope.row.rank }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="logo" align="center" width="200"> 
            <template slot-scope="scope">
              <p class="xmBox">
                <img :src="'https://events.wtwuxicenter.com/'+scope.row.img" />
              </p>
            </template>
          </el-table-column>
          
          <el-table-column prop="delegationName" label="道馆名称" align="left"> </el-table-column>
          <el-table-column prop="province" label="道馆地区" align="left"><template slot-scope="scope">{{ scope.row.province+' / '+scope.row.city+' / '+scope.row.country }}</template></el-table-column>
          <el-table-column prop="score" label="总积分" align="center">
            <template slot-scope="scope">
              <span class="pp">{{
                scope.row.score.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="list">
            <div class="item" v-for="(item, index) in tableData" :key="index" @click="() => dialogVisible1Show(item,1)">
              <div class="left">
                <i>{{ item.rank }}</i>
                <p class="xmBox">
                  <img :src="'https://events.wtwuxicenter.com/'+item.img" />
                </p>
              </div>
              <div class="right">
                <p>道馆名称:{{ item.delegationName }}</p>
                <p style="font-size:14px;padding:5px 0;">{{ item.province+' / '+item.city+' / '+item.country }}</p>
                <p style="color:cadetblue;font-size:14px">总积分:{{ item.score.toFixed(2) }}</p>
              </div>
            </div>
          </div>
        <div class="pagination">     
          <el-pagination
          v-if="windowWidth > 768 || windowWidth == 768"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.page"
            :page-sizes="[10, 20, 40, 80]"
            :page-size="formInline.pageSize"
            layout="total,sizes,prev,pager,next"
            :total="total"
          >
          </el-pagination>
          <el-pagination
            v-else
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.page"
            :page-sizes="[10, 20, 40, 80]"
            :page-size="formInline.pageSize"
            layout="total,prev,next"
            :total="total"
          >
          </el-pagination>
      </div>
      <el-dialog :title="chooseGroup.delegationName" :visible.sync="dialogVisible1" width="900px" >
        <div class="dialog-header" v-if="showType==2">
          <img :src="'https://events.wtwuxicenter.com/'+detailData.img" />
          <div>
            <p>{{ detailData.name }}</p>
            <p>{{ detailData.delegationName }}</p>
          </div>
          <p class="back" @click="()=>dialogVisible1Show(chooseGroup,1)">返回》</p>
        </div>
        <!-- <div class="bgwhite" v-if="showType==1"> -->
          <el-table 
           v-if="showType==1&&(windowWidth > 768 || windowWidth == 768)"
          :data="personList"
          style="width: 100%; border: 1px solid #ddd"
          height="670"
          size="small"
          @row-click="(item)=>dialogVisible1Show(item,2)"
        >
          <el-table-column label="排名" type="index" width="100" align="center">
            <template slot-scope="scope">
              <el-tag type="success" size="small">{{ scope.row.rank }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="照片" align="center" width="100"> 
            <template slot-scope="scope">
              <p class="xmBox">
                <img :src="'https://events.wtwuxicenter.com/'+scope.row.avatarUrl" />
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
          <el-table-column prop="sex" label="性别" align="center" > </el-table-column>
          <el-table-column prop="ageGroup" label="年龄组" align="center"> </el-table-column>
          <el-table-column prop="score" label="总积分" align="center">
            <template slot-scope="scope">
              <span class="pp">{{
                scope.row.score.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- </div> -->
        <div class="bgwhite" v-else>
          <div class="dialog-middle">
            <h4>排名汇总</h4>
            <div class="flex" >
              <div class="item" v-for="(item,index) in detailData.rankList" :key="index">
                <p>{{item.eventName}} </p>
                <p>{{ item.rank }}</p>
              </div>
            </div>
          </div>
         
          <div class="dialog-bottom" >
          <div v-for="(item,key) in detailData.raceList" :key="key" style="margin-bottom:40px">
            <div class="title">
              <p>{{ item.event }} </p>
              <p>分数总和:<span>{{ item.totalScore.toFixed(2) }}</span></p>
            </div>
            <el-table
            class="dialogTable"
              :data="item.raceList"
              style="width: 100%"   
              :stripe="true"
            >
              <el-table-column prop="raceName" label="比赛" align="left" width="200px" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="raceLevel" label="赛事级别" align="left" width="100px">
              <template slot-scope="scope">
               {{ scope.row.raceLevel==0?'城市赛':scope.row.raceLevel==1?'总决赛':scope.row.raceLevel==2?'C级':'D级'}}
              </template>
              </el-table-column>
              <el-table-column prop="raceDateRange" label="赛事时间" align="left" width="170px">
              </el-table-column>
              <el-table-column prop="raceLocation" label="赛事地点" align="left"  width="170px" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="rank" label="排名" align="left">
              </el-table-column>
              <el-table-column prop="score" label="分数" align="left">
              <template slot-scope="scope">{{ scope.row.score.toFixed(2) }}</template>
              </el-table-column>
            </el-table>
          </div>
          </div>
        </div>
      </el-dialog>
      <mt-popup
        v-model="popupVisible1"
        position="right"
        :closeOnClickModal="true"
        popup-transition="popup-fade"
      >
          <div class="popupContent list" v-if="showType==1">
            <div class="item" v-for="(item, index) in personList" :key="index" @click="() => dialogVisible1Show(item,2)">
              <div class="left">
                <i>{{ item.rank }}</i>
                <p class="xmBox">
                  <img :src="'https://events.wtwuxicenter.com/'+item.avatarUrl" />
                </p>
              </div>
              <div class="right">
                <p>性别:{{ item.sex }} </p>
                <p style="font-size:14px;padding:5px 0;">{{ item.ageGroup}}</p>
                <p style="color:cadetblue;font-size:14px">总积分:{{ item.score.toFixed(2) }}</p>
              </div>
            </div>
          </div>
          <div class="popupContent" v-else>
           
            <div class="dialog-header">
            <img :src="'https://events.wtwuxicenter.com/'+detailData.img" />
            <div>
              <p>{{ detailData.name }}</p>
              <p>{{ detailData.delegationName }}</p>
            </div>
            <p class="back" @click="()=>dialogVisible1Show(chooseGroup,1)">返回》</p>
            </div>
            <div class="bgwhite">
            <div class="dialog-middle">
              <h4>排名汇总</h4>
              <div class="flex">
                <div class="item" v-for="(item,index) in detailData.rankList" :key="index">
                  <p>{{item.eventName}} </p>
                  <p>{{ item.rank }}</p>
                </div>
              </div>
            </div>
          
            <div class="dialog-bottom">
              <div v-for="(item,key) in detailData.raceList" :key="key" style="margin-bottom:40px">
              <div class="title">
                <p>{{ item.event}}</p>
                <p>分数总和:<span> {{ item.totalScore.toFixed(2) }}</span></p>
              </div>
              <div class="jfList">
              <div class="jfItem" v-for="(item1,index1) in item.raceList" :key="index1">
                <p>比赛：{{ item1.raceName }}</p>
                <p>赛事级别：{{  item1.raceLevel==0?'城市赛':item1.raceLevel==1?'总决赛':item1.raceLevel==2?'C级':'D级' }}</p>
                <p>赛事时间：{{ item1.raceDateRange }}</p>
              
                <p>赛事地点：{{ item1.raceLocation }}</p>
                <p>
                  <el-tag type="success" size="mini">排名</el-tag>{{ item1.rank }}
                </p>
                <p>
                  <el-tag type="warning" size="mini">分数</el-tag>{{ item1.score.toFixed(2) }}
                </p>
              </div>
            </div>
            </div>
            </div>
            </div>
          </div>
         
      </mt-popup>
      </div>
    </div>
  </div>
</template>
<script>
import { queryFilters,getPersonalRank,getPersonalDetail,getDelegationRank,getCurrentSeason,getDelegationDetail2} from "@/api";
import { Popup } from "mint-ui";
import cityJson from '@/api/city.json'
export default {
  name: "",
  components: { Popup },
  data() {
    return {
      cityJson,
      areaVisible:false,
      ageGroup:[],
      competitionEvents:[],
      noneCompetitionEvents:[],
      seasons:[],
      total:0,
      detailTotal: 0,
      province:"",//非必填
      city:"",//非必填
      cityList:[],
      countryList:[],
      formInline: {
        name:'',
        rankType:'1',
        seasonId:1,
        // eventType:'0',
        // eventName:'全部',
        province:"",//非必填
        city:"",//非必填
        country:"",//非必填
        page: 1,
        pageSize: 10,
      },
      detailForm: {
          seasonId: 1,
          name: "",
          idcard: "",
        },
      activeName:"1",
      project:[
      {label:'竞技排名',value:"1"},
      {label:'品势排名',value:"2"}
      ],
      projectList:[],
      tableData:[],
      windowWidth: "",
      showType:0,
      dialogVisible1:false,
      popupVisible1:false,
      detailData:{
          ranks:[],
          races:[],
          img:'',
          name:'',
          delegationName:''
        },
        personList:[],
        seasonId:'',
        chooseGroup:{}
    };
  },
  components: {  },
  async created() {
    var that = this;
    this.windowWidth = window.screen.width;
    getCurrentSeason().then(res=>{
        this.seasonId=res.data
      })
    this.initData()
  },
  beforeDestroy() {},
  methods: {
    provinceChange(e){
      console.log(e)
      this.formInline.province=e.Code
      this.formInline.city=""
      this.formInline.country=""
      this.city=''
      this.cityList=e.Children
      this.countryList=[]
       this.search()
    },
    provinceClear(){
      this.formInline.province=""
      this.formInline.city=""
      this.formInline.country=""
      this.city=''
      this.cityList=[]
      this.countryList=[]
       this.search()
    },
    cityChange(e){
      this.formInline.city=e.Code
       this.formInline.country=''
      this.countryList=e.Children
      this.search()
    },
    cityClear(){
      this.formInline.city=""
       this.formInline.country=''
      this.countryList=[]
      this.search()
    },
    dialogVisible1Show(item,type) {
      this.showType=type
        if (window.screen.width < 768) {
          this.popupVisible1 = true;
        } else {
          this.dialogVisible1 = true;
        }
       
        if(type==2){
            this.detailForm = {
            ...item,
            seasonId:this.formInline.seasonId
          };
          this.initDetail();
        }else{
          this.chooseGroup=item
          getDelegationDetail2(this.chooseGroup.delegationId).then(res=>{
            this.personList=res.data
          })
        }
        
      },
      initDetail(){
        getPersonalDetail(this.detailForm).then(res=>{
             this.detailData=res.data
        })
      },
    handleClick(tab){
      this.activeName=tab.name
      if(tab.index==0){
        this.projectList=this.competitionEvents
        this.formInline={  
          name:'',      
          page: 1,
          pageSize: 10,
          rankType:'1',
          // eventName:'全部',
          // eventType:'0',
          seasonId:this.seasons[0].id,
          ageGroup:'',
          province:"",//非必填
         city:"",//非必填
         country:"",//非必填
        }
        this.city=""
      }else{
        this.projectList=this.noneCompetitionEvents
        this.formInline={ 
          name:'',       
          page: 1,
          pageSize: 10,
          rankType:'1',
          // eventName:'全部',
          // eventType:'1',
          seasonId:this.seasons[0].id,
          ageGroup:'',
          province:"",//非必填
          city:"",//非必填
         country:"",//非必填
        }
         this.city=""
      }
      this.getList()
    },
    initData() {
      
      queryFilters().then(res=>{
        this.ageGroup=res.data.ageGroup
        this.competitionEvents=res.data.competitionEvents
        this.noneCompetitionEvents=res.data.noneCompetitionEvents
        this.seasons=res.data.seasons
        this.formInline.seasonId=res.data.seasons[0].id
        // this.formInline.eventName="全部"
        this.projectList=this.competitionEvents
      }).then(res=>{
        //  this.provinceChange(cityJson[17])
         this.getList()
      })
    },
    getList(){
      getDelegationRank(this.formInline).then(res=>{
            this.tableData=res.data.data
            this.total=res.data.total
        })
    },
    search() {
      this.formInline.page=1
      this.formInline.pageSize=10
      this.getList()
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>

div,
p{
  box-sizing: border-box;
  margin:0;
}
.logs {
    text-align: center;
    // border-bottom: 1px solid #ddd;

    span {
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      padding: 5px;
      color: #3fd08a;
      i {
        font-size: 14px;
        margin-right: 5px;
        font-weight: 600;
      }
    }
    span:hover {
      background: #f5f5f5;
    }
  }
.container {
    width: 100%;
    padding: 10px 20px;
  }
.demo-form-inline {
  background: #fff;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top:30px;
}
::v-deep {
  .tableBox {
    .el-table th.el-table__cell {
      background-color: #f5f5f5;
    }
  }
.dialogTable{
  th.el-table__cell {
     color: #5cb48a;
    }
}
  .el-form-item {
    width: 100%;
  }
  .el-form-item__content {
    width: calc(100% - 90px);
  }
  .search {
    .el-form-item__content {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
  .el-dialog {
    background: #f5f5f5;
  }
}
.inputAndSelect {
  width: calc(100% - 10px);
}
.select30{
  width: calc(100%/3.3);
  margin-right:2px;
}
.footer {
  width: 100%;
  background: #222;
  min-height: 60px;
  margin-top: 20px;
}
.tableBox {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  min-height: 750px;
  padding: 0 20px 20px 20px;

}
.pagination {
  text-align: center;
  padding-top:20px;
}
.xmBox {
  width:100%;

  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    
  }
  span {
    color: #176e44;
    cursor: pointer;
    padding: 5px;
  }
  span:hover {
    background-color: #ddd;
  }
}

span.pp {
  color: #176e44;
 // cursor: pointer;
  //padding: 5px; 
}
span.pp:hover {
  //background-color: #ddd;
}
.news {
  .title {
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    span:nth-child(1) {
      font-weight: bold;
      font-size: 18px;

      margin-right: 20px;
    }
    span:nth-child(2) {
      padding-left: 20px;
      border-left: 1px solid #ddd;
      color: #3a3939;
    }
  }
  .content {
    padding-top: 20px;
  }
}

.popupContent {
  min-width: 300px;
  height: 100vh;
  background: #fff;
  padding: 20px;
  overflow: auto;
  .popopTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .text {
    border-bottom: 1px solid #ddd;
    .zz {
      color: #666;
      font-size: 12px;
      margin: 10px 0;
    }
  }
}
.popupContent{
  max-width: 300px;
  height: 100vh;
  background: #f5f5f5;
  padding: 20px;
  overflow: auto;
  .dialog-middle .flex .item{
    width:100%;
    margin-bottom:10px;
  }
  .dialog-bottom .title p{
    font-size: 12px;
  }
  .bgwhite{
    height:calc(100vh - 105px);
  }
}
.list {
  width: 100%;
  .item {
    padding: 10px;
    position: relative;
    border: 1px solid #1e941e;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    i {
      font-style: normal;
      position: absolute;
      right: 0;
      top: 0;
      background: #1e941e;
      color: #fff;
      width: 50px;
      height: 25px;
      text-align: center;
      font-size: 12px;
      line-height: 25px;

      border-bottom-left-radius: 16px;
    }
    .xmBox {
      flex-direction: column;
      align-items: center;
      margin-right: 10px;
      img {
        width: 70px;
        height: 70px;
        margin: 0;
      }
    }
  }
}
.jfList {
  margin-top: 10px;

  .jfItem {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    overflow: hidden;
    font-size: 14px;
    p {
      line-height: 25px;
      padding: 0 5px;
    }
    .nf {
      font-size: 14px;
      background: #1e941e;
      color: #fff;
      width: 100%;
      text-align: center;
      padding: 5px 0;
    }
  }
}
.back{
   margin-left:20px;
   color:#1e941e;
   cursor: pointer;
}
@media (max-width: 768px) {
  .back{
   margin-left:10px;
   cursor: pointer;
   font-size:12px;
}
  .center {
    width: calc(100% - 40px);
  }
 
  .header {
    height: 50px;
    .center {
      width: 80%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
    }
    img {
      width: 40px;
      height: 40px;
      margin-right: 20px;
    }
    span {
      color: #176e44;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
.dialog-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  div {
    p:nth-child(1) {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    p:nth-child(2) {
      font-size: 12px;
      color: #9b9999;
    }
  }
}
.bgwhite{
  background:#fff;
  padding:15px;
  margin-top:20px;
  height:500px;
  overflow: auto;
}
.dialog-middle {
  h4 {
    padding-bottom: 20px;
  }
  .flex {
    display: flex;
    flex-wrap: wrap;
    .item {
      border: 1px solid #1e941e;
      width: 260px;
      border-radius: 5px;
      overflow: hidden;
      margin-right:10px;
      margin-bottom:10px;
      p {
        text-align: center;
        padding: 8px 0;
        font-size: 22px;
      }
      p:nth-child(1) {
        border-bottom: 1px solid #1e941e;
        font-size: 14px;
        padding: 3px 0;
        background:#f2f2f2;
      }
    }
  }
}
.dialog-bottom {
  margin-top: 20px;
  .title {
    width:100%;
    display: flex;
    flex-direction: row;
    p {
      background: #f5f5f5;
      margin-right: 5px;
      color: #000;
      font-weight: bold;
      padding: 3px 5px;
      overflow: hidden;
    }
    p:nth-child(2) {
      span {
        font-weight: normal;
      }
    }
  }
}
.flex-right{
  width:100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom:20px;

}
.content{
  padding:20px;
  min-height:300px;
}

</style>
